<template>
  <div>
    <el-form :inline="true" :model="SearchBean" class="demo-form-inline">
  <el-form-item label="">
    <div class="block">
    <span class="demonstration">开始日期</span>
    <el-date-picker
      v-model="SearchBean.BeginDate"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
    <span class="demonstration">-</span>
    <el-date-picker
      v-model="SearchBean.EndDate"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
  </div>
  </el-form-item>
  <el-form-item label="商品类型">
     <el-select v-model="SearchBean.tid" placeholder="请选择">
    <el-option
      v-for="item in TypeList"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
  </el-form-item>
  <el-form-item label="商品编码或者名称">
    <el-input v-model="SearchBean.name" placeholder="商品编码或者名称"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="getSaleList">查询</el-button>
  </el-form-item>
</el-form>
    <el-table :data="SaleList" style="width: 100%" max-height="600">
      <el-table-column prop="id" label="ID" width="150"></el-table-column>
      <el-table-column prop="saleNumber" label="销售编号" width="150"></el-table-column>
      <el-table-column prop="saleDate" label="销售日期" width="180"></el-table-column>
      <el-table-column prop="cname" label="客户" width="150"></el-table-column>
      <el-table-column prop="code" label="商品编码" width="100"></el-table-column>
      <el-table-column prop="name" label="商品名称" width="400"></el-table-column>
      <el-table-column prop="model" label="商品型号" width="150"></el-table-column>
      <el-table-column prop="tname" label="商品类别" width="100"></el-table-column>
      <el-table-column prop="unit" label="单位" width="50"></el-table-column>
      <el-table-column prop="price" label="单价" width="50" :formatter="price"></el-table-column>
      <el-table-column prop="num" label="数量" width="50"></el-table-column>
      <el-table-column prop="num" label="总金额" width="150" :formatter="num"></el-table-column>
    </el-table>

  </div>
</template>


<script>
export default {
  methods: {
    getSaleList:function(){
      var $this = this;
      this.axios({
        method: "post",
        url: "http://localhost:9999/biz/tSaleListGoods/getSaleList",
        params: {
          access_token: localStorage.getItem("access_token"),
          name:this.SearchBean.name,
          BeginDate:this.SearchBean.BeginDate,
          EndDate:this.SearchBean.EndDate,
          tid:this.SearchBean.tid
        },
      }).then(function(res) {
        window.console.log(res,"res")
        $this.SaleList=res.data.obj
      });
    },
    getTypeList:function(){
      var $this = this;
      this.axios({
        method: "post",
        url: "http://localhost:9999/biz/tSaleListGoods/getTypeList",
        params: {
          access_token: localStorage.getItem("access_token"),
        },
      }).then(function(res) {
        window.console.log(res,"res")
        $this.TypeList=res.data.obj
      });
    },
     price:function(str){
       return "￥"+str.price
     },
     num:function(str){
       return str.price*str.num;
     }
  },
 
  data() {
    return {
      SaleList: [],
      SearchBean:{},
      TypeList:[]
    };
  },
  mounted() {
    this.SearchBean.EndDate='2020-10-10'
    this.SearchBean.BeginDate='2010-10-10'
    this.getTypeList()
  }
};
</script>
